// @flow
import React, { Component } from 'react';
import { Table, Button, Modal } from 'antd';
import { PayActions } from 'store/actionCreators';
import './AccountingSubjectCom.scss';

type Props = {
  Forms: Array<Node>,
  data: Array<any>,
  visible: boolean,
  handleOk: any,
  handleCancel: any,
  type: string,
};

class AccountingSubjectCom extends Component<Props> {
  render() {
    const columns = [
      {
        title: '编码',
        dataIndex: 'code',
        key: 'code',
        width: '20%',
      },
      {
        title: '科目',
        dataIndex: 'title',
        width: '30%',
        key: 'title',
      },
      {
        title: '级别',
        dataIndex: 'level',
        width: '20%',
        key: 'level',
      },
      {
        title: '操作',
        dataIndex: 'Action',
        key: 'Action',
        render: (text, record, index) => {
          return (
            <div>
              <Button
                onClick={() => {
                  PayActions.changeModledlgType('Edit');
                  PayActions.showModledlg();
                }}
              >
                Edit
              </Button>
              <Button
                onClick={() => {
                  console.log(text);
                  console.log(record);
                  console.log(index);
                }}
              >
                Delete
              </Button>
              <Button
                onClick={() => {
                  console.log(text);
                  console.log(record);
                  console.log(index);
                }}
              >
                Insert
              </Button>
            </div>
          ); // <a href="">Delete</a>;
        },
      },
    ];
    const { data } = this.props;
    return (
      <div className="AccountingSubjectCom">
        <Table columns={columns} dataSource={data} />
        <Modal
          title="Basic Modal"
          visible={this.props.visible}
          onOk={this.props.handleOk}
          onCancel={this.props.handleCancel}
        >
          {this.props.Forms[this.props.type]}
        </Modal>
      </div>
    );
  }
}

export default AccountingSubjectCom;
